<template>
	<view class="box-padding" style="--px: 26rpx">
		<view class="box">
			<view class="flex vertical-center">
				<text>学员姓名：</text>
				<input :disabled="!isEdit" v-model="studentInfo.real_name" class="input-box" :class="{'input-hui': isEdit}" type="text" placeholder="请输入姓名" />
			</view>
			<view class="flex vertical-center">
				<text>学员性别：</text>
				<view class="input-box " :class="{'input-hui': isEdit}">
					<picker :disabled="!isEdit" @change="bindGendersChange" :range="genders">
						<view style="width: 55vw;">{{ genders[studentInfo.sex] }}</view>
					</picker>
				</view>
			</view>
			<view class="flex vertical-center">
				<text>出生年月：</text>
				<view class="input-box " :class="{'input-hui': isEdit}">
					<picker :disabled="!isEdit" mode="date" :value="studentInfo.birthday" start="1970-01-01" :end="getDate" @change="bindDateChange">
						<view v-if="!studentInfo.birthday" style="color: #828282;width: 55vw;">请选择出生年月</view>
						<view v-else style="width: 55vw;">{{ studentInfo.birthday }}</view>
					</picker>
				</view>
			</view>
			<view class="flex vertical-center">
				<text>家长姓名：</text>
				<input :disabled="!isEdit" v-model="studentInfo.parent_name" class="input-box" :class="{'input-hui': isEdit}" type="text" placeholder="请输入姓名" />
			</view>
			<view class="flex vertical-center">
				<text>手机号码：</text>
				<input :disabled="!isEdit" v-model="studentInfo.mobile" class="input-box" :class="{'input-hui': isEdit}" type="number" placeholder="请输入手机号码" />
			</view>
			<view class="flex vertical-center">
				<text>学校类型：</text>
				<view class="input-box" :class="{'input-hui': isEdit}">
					<picker range-key="text"	 :disabled="!isEdit" @change="bindSchoolsChange" :range="schools">
						<view v-if="!studentInfo.school_id" style="color: #828282;width: 55vw;">请选择学习类型</view>
						<view style="width: 55vw;" v-else>{{ schoolsObj[studentInfo.school_id] }}</view>
					</picker>
				</view>
			</view>
			<view class="flex vertical-top">
				<text class="mt-10">通讯地址：</text>
				<textarea 
				:disabled="!isEdit"
				:class="{'input-hui': isEdit}"
				class="input-box-textarea" v-model="studentInfo.address" placeholder="请输入通讯地址" />
			</view>
		</view>
		<view style="padding-top: 30rpx;">
			<v-button v-if="!isEdit"  @onclick="isEdit = true">编辑</v-button>
			<v-button v-else @onclick="onSave">保存</v-button>
		</view>
	</view>
</template>

<script>
	import UserApi from "@/api/user.js";
	import { toast, verifyPhone } from "@/utils/util.js";
	import vButton from "@/components/button/button.vue";
	
export default {
	components: {
		vButton
	},
	data() {
		const currentDate = this.getDate({
			format: true
		});
		return {
			isEdit: false,
			genders: ['女', '男'],
			schoolIndex: 0,
			schools: [],
			schoolsObj: null,
			studentInfo: {
				real_name: "",
				sex: "",
				sex_str: "",
				birthday: "",
				parent_name: "",
				mobile: "",
				school_id: "",
				school_name: "",
				address: ""
			}
		};
	},
	onLoad() {
		this.getMyInfo();
	},
	methods: {
		async getMyInfo() {
			const res = await UserApi.GetUserInfo()
			console.log(res);
			this.studentInfo = res.userinfo;
			let schools = [];
			for (let key in res.school) {
				schools.push({
					text: res.school[key],
					type: key
				})
			}
			this.schoolsObj = res.school;
			this.schools = schools;
		},
		// 选择性别
		bindGendersChange(e) {
			this.studentInfo.sex = e.detail.value;
		},
		// 选择日期
		bindDateChange(e) {
			this.studentInfo.birthday = e.detail.value;
		},
		// 选择学校类型
		bindSchoolsChange(e) {
			this.studentInfo.school_id = this.schools[e.detail.value].type;
		},
		// 保存资料
		async onSave() {
			let { address, birthday, mobile, parent_name, real_name, school_id, sex } = this.studentInfo;
			let studentInfo = {
				address, birthday, mobile, parent_name, real_name, school_id, sex
			}
			if(!this.verifyData(studentInfo)){
				return
			}
			const res = await UserApi.PostEditUserInfo(studentInfo);
			console.log(res)
			this.getMyInfo();
			this.isEdit = false
			toast('保存成功', true)
			
		},
		// 验证表单字段是否完整
		verifyData(data) { 
			let status = true
			for (let key in data) {
				let item = data[key]
				if(key=='mobile') {
					status = verifyPhone(item)
				}
				if(item==='' || item === null) {
					toast('请填写完整')
					status = false;
				}
			}
			return status
		},
		// 获取当前时间
		getDate() {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		}
	}
};
</script>

<style lang="scss">
.box {
	background-color: $color-white;
	box-shadow: 3rpx 3rpx 10rpx rgba(#eee, 0.1);
	padding: 20rpx;
	border-radius: 5rpx;
	margin-bottom: 30rpx;
	font-size: 25rpx;
	color: $text-color;
	> .flex {
		margin-bottom: 14rpx;
		> text {
			margin-right: 47rpx;
			font-weight: bold;
		}
		&:last-child {
			margin-bottom: 0;
		}
	}
	.input-box-textarea{
		flex: 1;
		height: 150rpx;
		line-height: 30rpx;
		font-size: 25rpx;
		border-radius: 10rpx;
		padding: {
			left: 40rpx;
			top: 20rpx;
			right: 20rpx;
			bottom: 20rpx;
		};
	}
	.input-box {
		flex: 1;
		height: 56rpx;
		display: flex;
		align-items: center;
		line-height: 56rpx;
		font-size: 25rpx;
		border-radius: 10rpx;
		padding-left: 40rpx;
		picker {
			width: 100%;
			height: 100%;
			display: flex;
		}
	}
	.input-hui {
		background-color: #e6e6e6;
		picker {
			view{
				position: relative;
				&::after{
					content: "";
					position: absolute;
					right: 0;
					top: 0;
					bottom: 0;
					margin: auto;
					width: 0;
					height: 0;
					border-style: solid;
					border-width: 15rpx 10rpx 0 10rpx;
					border-color: #828282 transparent transparent transparent;
				}
			}
		}
	}
}
</style>
